<template>
  <div class="artlist-container">我是ArtList组件</div>
</template>

<script>
export default {
  // created () {
  //   // abc() // 调用 abc 函数。abc函数没有定义过，所以报错了
  // }
  // 第1个钩子函数
  beforeCreate () {
    console.log('子 - beforeCreate')
  },
  // 第2个钩子函数
  created () {
    console.log('子 - created')
  },
  // 第3个钩子函数
  beforeMount () {
    console.log('子 - beforeMount')
  },
  // 第4个钩子函数
  mounted () {
    console.log('子 - mounted')
  },
  // 第5个钩子函数
  beforeUpdate () {
    console.log('子 - beforeUpdate')
  },
  // 第6个钩子函数
  updated () {
    console.log('子 - updated')
  },
  // 7. beforeDestroy
  beforeDestroy () {
    console.log('子 - beforeDestroy')
  },
  // 8. destroyed
  destroyed () {
    console.log('子 - destroyed')
  }
}
</script>

<style lang="less" scoped>
.artlist-container {
  background-color: pink;
  margin: 5px;
  padding: 10px;
}
</style>
